<template>
  <div id="purchaseDetails">
    <c-title :hide="false" :text="this.$route.params.coupon?'提货券明细':(isvip?'提货券明细':'采购款明细')"></c-title>
    <van-tabs v-model="active" @change="changeTap" v-if="!isvip">
      <van-tab
        :title="item"
        v-for="(item, index) in tabNav"
        :key="index"
      ></van-tab>
    </van-tabs>
    <div class="listBox">
      <div class="lis" v-for="(item, index) in listData" :key="index">
        <div class="top">
          <div class="topLeft">{{ item.change_type_name }}</div>
          <div class="topRight">￥{{ item.change_amount }}</div>
        </div>
        <div class="bottom">
          <div class="bottomLeft">{{ item.created_at }}</div>
          <div class="bottomRight">{{ item.amount_type_name }}</div>
        </div>
      </div>
      <div class="noneLis" v-if="listData.length == 0">暂无明细</div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 0,
      tabNav: [],
      listData: [],
      coupon:false,
      isvip:false,

      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    const plugin_setting = JSON.parse(localStorage.getItem("plugin_setting")).debt_shop;
    if (this.$route.params.coupon) {
      this.coupon = true;
      this.tabNav = ["全部", `${plugin_setting.common_credit_name?plugin_setting.common_credit_name:"消费账户"}`, `${plugin_setting.frozen_credit_name?plugin_setting.frozen_credit_name:"锁定账户"}`];
      this.fun.setWXTitle("提货券明细");
    } else if(this.$route.params.vip){
      this.tabNav = [];
      this.isvip = true;
      this.fun.setWXTitle("提货券明细");
    }else {
      this.tabNav = ["全部", "采购金", "网店收入"];
      this.fun.setWXTitle("采购款明细");
    }
    this.active = 0;
    this.getData();
  },
  methods: {
    init() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
    },
    changeTap() {
      this.init();
      this.getData();
    },
    getData() {
      // let amount_type;
      let json ={
        amount_type:''
      }
      if (this.coupon) {
        // 提货券明细
        if (this.active == 0) {
          json.amount_type = [1,2];
        } else if (this.active == 1) {
          json.amount_type = "2";
        } else if (this.active == 2) {
          json.amount_type = '1';
        }
      } else if(this.isvip){
        json.amount_type = "2";
      } else {
        if (this.active == 0) {
          json.amount_type = [3, 4, 5];
        } else if (this.active == 1) {
          json.amount_type = "3";
        } else if (this.active == 2) {
          json.amount_type = [4, 5];
        }
      }
      if(this.$route.params.debtId){
        json.debtor_id = this.$route.params.debtId
      }
      $http
        .post(
          "plugin.debt-shop.frontend.debt-member.creditLog",
          json,
          "加载中"
        )
        .then((response) => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.page = 1;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.listData = response.data.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        // let amount_type;
        let json ={
          amount_type:'',
          page:this.page,
        }
        if (this.coupon) {
          // 提货券明细
          if (this.active == 0) {
            json.amount_type = [1,2];
          } else if (this.active == 1) {
            json.amount_type = "2";
          } else if (this.active == 2) {
            json.amount_type = '1';
          }
        } else if(this.isvip){
          json.amount_type = "2";
        } else {
          if (this.active == 0) {
            json.amount_type = [3, 4, 5];
          } else if (this.active == 1) {
            json.amount_type = "3";
          } else if (this.active == 2) {
            json.amount_type = [4, 5];
          }
        }
        if(this.$route.params.debtId){
          json.debtor_id = this.$route.params.debtId
        }
        $http
          .post(
            "plugin.debt-shop.frontend.debt-member.creditLog",
            json,
            "加载中"
          )
          .then(
            (response) => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.listData = this.listData.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.noneLis {
  text-align: center;
  color: #999;
}

.listBox {
  padding: 0.63rem;
  display: flex;
  flex-direction: column;

  .lis {
    background-color: #fff;
    border-radius: 0.31rem;
    padding: 0.91rem 0.81rem;
    box-sizing: border-box;
    margin-bottom: 0.625rem;

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75rem;
      margin-top: 0.8rem;

      .bottomLeft {
        color: #7e7e7e;
      }

      .bottomRight {
        color: #7e7e7e;
      }
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.88rem;

      .topRight {
        color: #f15353;
      }

      .topLeft {
        color: #2f2f2f;
      }
    }
  }
}
</style>
